<template>
  <div>
    <div class="pages-certificate" v-if="!sub">
      <div class="head">
        <div class="search-data-box">
          <el-row :gutter="15">
            <el-col :span="8">
              <span>用户姓名</span>
              <el-input v-model="searchData.name" size="small" @change="changePage()"></el-input>
            </el-col>
            <el-col :span="8">
              <span>报考内容</span>
              <el-select v-model="searchData.content" filterable placeholder="请选择" size="small" @change="changePage()">
                <el-option
                  v-for="item in contentOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="8">
              <span>支付通道</span>
              <el-select v-model="searchData.payType" filterable placeholder="请选择" size="small" @change="changePage()">
                <el-option
                  v-for="item in payOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
          </el-row>
          <el-row>
            <el-row :gutter="15">
              <el-col :span="8">
                <span class="demonstration">服务商</span>
                <el-select v-model="searchData.serviceProviderId" filterable placeholder="请选择" size="small" @change="changePage()">
                  <el-option
                    v-for="item in serviceOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-col>
              <el-col :span="8">
                <span>报名时间</span>
                <el-date-picker
                  v-model="searchData.applyTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd"
                  size="small"
                  @change="changePage()"
                ></el-date-picker>
              </el-col>
              <el-col :span="8">
                <el-button type="primary" size="small" @click="getList()">查询</el-button>
                <el-button size="small" @click="resetSearchData()">重置</el-button>
                <el-button type="primary" size="small" @click="outPut(0)">导出</el-button>
              </el-col>
            </el-row>
          </el-row>
        </div>
      </div>
      <div class="pay-total">支付金额: {{payTotalAmount}}</div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" width="50" label="序号">
          <template slot-scope="scope">
             <span>{{scope.$index+ pageData.pageSize*(pageData.currentPage -1) +1}}</span>
           </template>
        </el-table-column>
        <el-table-column prop="name" label="用户姓名" width="180"></el-table-column>
        <el-table-column prop="idNumber" label="身份证号" width="180"></el-table-column>
        <el-table-column prop="phone" label="联系电话"></el-table-column>
        <el-table-column prop="certificateType" label="报考内容" :formatter="certType"></el-table-column>
        <el-table-column prop="registeTime" label="报名时间" :formatter="trunTime"></el-table-column>
        <el-table-column prop="payAmount" label="支付金额"></el-table-column>
        <el-table-column prop="payType" label="支付通道" :formatter="payType"></el-table-column>
        <el-table-column prop="serviceProvideName" label="服务商"></el-table-column>
      </el-table>
      <!-- 页码 -->
      <page-unit :pageData="pageData" :func="getList"></page-unit>
    </div>
    <div class="pages-certificate" v-else>
      <router-view></router-view>
    </div>
  </div>
</template>


<script>
import { mapState } from "vuex";
import state from "@/util/state";
import util from "@/util";
import pageUnit from "@/components/Page";
import { trainRegisteLIst, exportTrainRegisteLIst,providerList } from "@/api";
var fileDownload = require("js-file-download");
export default {
  computed: mapState(["merchantId", "sub", "power"]),
  components: { pageUnit },
  name: "statements",
  data() {
    return {
      payType: state.cerPayType ,
      certType: state.certType,
      payTotalAmount: 0,
      pageData: {
        pageSize: 20,
        currentPage: 1,
        totalItems: 0,
        pageSizeArr: [5, 10, 20]
      },
      searchData: {
        name: "",
        certificateType: "",
        payType: "",
        serviceProviderId: "",
        applyTime: ""
      },
      tableData: [],
      serviceList: [],
      serviceOptions: [{
        id: " ",
        name: "全部"
      }],
      contentOptions: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "0",
          label: "母婴照护指导"
        }
      ],
      payOptions: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "0",
          label: "微信"
        },
        {
          value: "1",
          label: "支付宝"
        }
      ]
    };
  },
  mounted() {
    this.getList();
    this.getServiceOption();
  },
  methods: {
    changePage() {
      this.pageData.currentPage = 1
    },
    getServiceOption() {
      providerList({
        shopId: this.merchantId,
        serviceType: 2,
        serviceProviderNature: "",
        name: name,
        pageNum: 1,
        pageSize: 20
      }).then(res => {
        this.serviceOptions = [{
          id: "",
          name: "全部"
        }]
        this.serviceOptions = this.serviceOptions.concat(res.data.list);
      });
    },
    trunTime(row, column, cellValue) {
      return util.getdatetime(cellValue);
    },
    getList() {
      let data = {
        source: 3,
        shopId: this.merchantId,
        serviceType: 2,
        serviceProviderId: this.searchData.serviceProviderId,
        name: this.searchData.name,
        certificateType: this.searchData.certificateType,
        registeStartTime: "",
        registeEndTime: "",
        payType: this.searchData.payType,
        pageNo: this.pageData.currentPage,
        pageSize: this.pageData.pageSize,
        status:'1,3,4,5'
      };
      if (this.searchData.applyTime) {
        data.registeStartTime = this.searchData.applyTime[0] + " 00:00:00";
        data.registeEndTime = this.searchData.applyTime[1] + " 23:59:59";
      }
      trainRegisteLIst(data).then(res => {
        this.tableData = res.data.list;
        this.payTotalAmount = res.data.payTotalAmount;
        this.pageData.totalItems = res.data.total;
      });
    },
    outPut() {
      let data = {
        source: 3,
        shopId: this.merchantId,
        serviceType: 2,
        serviceProviderId: this.searchData.serviceProviderId,
        name: this.searchData.name,
        certificateType: 0,
        registeStartTime: "",
        registeEndTime: "",
        payType: this.searchData.payType,
        pageNo: this.pageData.currentPage,
        pageSize: this.pageData.pageSize,
        status:'1,3,4,5'
      };
      if (this.searchData.applyTime) {
        data.registeStartTime = this.searchData.applyTime[0] + " 00:00:00";
        data.registeEndTime = this.searchData.applyTime[1] + " 23:59:59";
      }
      exportTrainRegisteLIst(data).then(res => {
        if (res.data == undefined) {
          let fileName = "对账单.xlsx";
          fileDownload(res, fileName);
        } else {
          this.$message(res.data.msg);
        }
      });
    },
    resetSearchData() {
      this.searchData = {
        name: "",
        certificateType: "",
        payType: "",
        serviceProviderId: "",
        applyTime: ""
      };
    }
  }
};
</script>

<style scoped  lang="less">
.pages-certificate {
  background: #fff;
  padding: 10px;
  margin-top: 10px;
}
.head {
  padding: 10px 15px;
  // margin-bottom : 40px;
}
.el-row {
  margin-bottom: 20px;
}
.el-select {
  margin: 0 10px;
  width: auto;
}
.el-input {
  margin: 0 10px;
  width: auto;
}
.el-date-editor--daterange.el-input__inner {
  width: 215px;
  margin: 0 10px;
}
.pay-total {
  margin-bottom: 20px;
}
</style>
